<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Image Editor</title>
    <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.3/tui-color-picker.css" rel="stylesheet">
    <link type="text/css" href="./dist/tui-image-editor.css" rel="stylesheet">
    <style>
        @import url(http://fonts.googleapis.com/css?family=Noto+Sans);

        html,
        body {
            height: 100%;
            margin: 0;
            overflow-y: hidden;
        }

        .tui-image-editor-header {
            padding: 10px 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border-bottom: 1px solid #DFDFDF;
        }

        .tui-image-editor-header-title {
            display: inline-block;
            font-size: 18px;
            font-weight: bold;
            margin-left: 24px;
            height: 36px;
            line-height: 36px;
        }

        .tui-image-editor-header-title_content {
            font-size: 14px;
            font-weight: 400;
            margin-left: 7px;
            margin-top: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tui-image-editor-header-title_content span {
            margin-left: 4px;
        }

        .tui-image-editor-header-title_content img:nth-of-type(2) {
            margin-left: 16px;
            margin-right: -1px;
        }

        .tui-image-editor-header-buttons {
            width: 30%;
            float: right;
            display: flex;
            justify-content: flex-end;
        }

        .primary_btn {
            height: 36px;
            width: 99px;
            margin-right:48px;
            padding: 0;
            display: inline-block;
            background-color: black;
            color: #fff;
            line-height: 36px;
            outline: none;
            border-radius: 20px;
            font-size: 16px;
            cursor: pointer;
            vertical-align: middle;
            letter-spacing: 1.1px;
            text-align: center;
            opacity: .8;
        }
        .primary_btn:hover{
            opacity: 1;
        }
        .normal_btn {
            height: 40px;
            width: 120px;
            display: inline-block;
            background-color: #fff;
            color: black;
            padding: 0;
            margin: 0 10px;
            line-height: 40px;
            outline: none;
            border-radius: 20px;
            border: 1px solid #ddd;
            font-size: 16px;
            cursor: pointer;
            vertical-align: middle;
            letter-spacing: 0.3px;
            text-align: center;
        }

        .tui-image-editor-header-papers {
            height: calc(100% - 64px);
            background-color: rgba(255, 255, 255, .7);
            z-index: 1;
            position: absolute;
            top: 62px;
            width: 256px;
            text-align: center;
            overflow: hidden;
        }

        .tui-image-editor-header-papers-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .tui-image-editor-header-papers-box {
            width: 200px;
            height: 164px;
            border-radius: 4px;
            margin: 8px 10px;
            background-color: #fff;
            background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
            background-size: 16px 16px;
            background-position: 0 0, 8px 8px;
        }

        .tui-image-editor-header-papers-box>img {
            max-height: 100%;
            max-width: 100%;
            vertical-align: middle;
        }

        .tui-image-editor-header-papers-box:hover {
            cursor: pointer;
            box-shadow: 2px 2px 2px rgba(155, 155, 155, .3);
        }

        .tui-image-editor-selectedBox {
            border: 4px solid #75C82B;
            border-radius: 4px;
            box-shadow: 2px 2px 2px rgba(155, 155, 155, .3);
        }

        #papers_problem {
            width: 114px;
            height: 40px;
            line-height: 40px;
            background: #FFFFFF;
            border-radius: 5px;
            text-align: center;
            position: fixed;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
            color: red;
        }

        #papers_problem:hover {
            cursor: pointer;
        }

        .papers_problem:hover {
            cursor: pointer;
        }

        /* --------------以下是评分的css----------- */
        #score_container {
            z-index: 10;
            position: fixed;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .score_close {
            display: inline-block;
            position: absolute;
            right: 24px;
            top: 10px;
            user-select: none;
        }

        .score_close:hover {
            cursor: pointer;
        }

        .score_container_box {
            width: 600px;
            height: 312px;
            position: relative;
            background: #FFFFFF;
            border: 1px solid #DFDFDF;
            border-radius: 12px;
            padding: 15px 22px;
        }

        .score_container_box h3 {
            text-align: center;
        }

        .score_container_normalProblem-content {
            width: 200px;
            height: 32px;
            display: inline-block;
        }

        .score_container_normalProblem-content input {
            height: 32px;
            font-size: 16px;
            border-radius: 4px;
            outline: none;
            background: none;
            text-align: center;
            line-height: 32px;
            border: 1px solid #DBDBDB;
        }

        .score_container_normalProblem-content span {
            height: 24px;
            width: 24px;
            margin-left: 12px;
            display: inline-block;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;
        }

        .score_container_otherProblem-content {
            width: 83%;
            height: 123px;
        }

        .score_container-btns {
            width: 308px;
            height: 40px;
            margin: 0 auto;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            text-align: center;
        }

        .score_container-btns span {
            width: 144px;
            height: 40px;
            line-height: 44px;
            border-radius: 20px;
            border: 1px solid #DFDFDF;
        }

        .score_container-btns span:hover {
            cursor: pointer;
        }

        .green-text {
            border: 1px solid #75C82B;
            color: #75C82B;
        }

        .yellow-text {
            border: 1px solid #FF8A00;
            color: #FF8A00;
        }

        .red-text {
            border: 1px solid #EB5757;
            color: #EB5757;
        }

        /* --------------以上是评分的css----------- */
        #modal_container {
            z-index: 10;
            position: fixed;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal_container_box {
            width: 600px;
            height: 312px;
            position: relative;
            background: #FFFFFF;
            border: 1px solid #DFDFDF;
            border-radius: 12px;
            padding: 15px 22px;
        }

        .modal_close {
            display: inline-block;
            position: absolute;
            right: 24px;
            top: 10px;
            user-select: none;
        }

        .modal_close:hover {
            cursor: pointer;
        }

        .modal_container_box h3 {
            text-align: center;
        }

        .modal_container_normalProblem-content {
            width: 380px;
            display: inline-flex;
            justify-content: space-between;
        }

        .modal_container-header {
            margin-right: 21px;
            vertical-align: middle;
        }

        .modal_container_normalProblem-content span {
            height: 28px;
            width: 80px;
            font-size: 14px;
            padding: 0 5px;
            line-height: 28px;
            text-align: center;
            border: 1px solid #DBDBDB;
            border-radius: 4px;
        }

        .modal_container_normalProblem-content span:hover {
            cursor: pointer;
        }

        .modal_container_otherProblem {
            display: flex;
            margin-top: 16px;
        }

        .modal_container_otherProblem-content {
            width: 83%;
            height: 123px;
        }

        .modal_container-btns {
            width: 308px;
            height: 40px;
            margin: 0 auto;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            text-align: center;
        }

        .modal_container-btns span {
            width: 144px;
            height: 40px;
            line-height: 44px;
            border-radius: 20px;
            border: 1px solid #DFDFDF;
        }

        .modal_container-btns span:hover {
            cursor: pointer;
        }

        .green-btn {
            background-color: #75C82B;
            color: white;
        }

        .active-btn {
            background-color: #DBDBDB;
        }

        .displayNone {
            display: none !important;
        }

        ::-webkit-scrollbar {
            background-color: white;
            width: 8px;
            height: 0px;
            background-clip: padding-box;
        }


        /*滚动条中间滑动部分*/
        ::-webkit-scrollbar-thumb {
            background-color: #E8E8E8;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="tui-image-editor-header">
        <div class="tui-image-editor-header-title">
            <span>Image Editor</span>
        </div>
        <div class="tui-image-editor-header-buttons">
            <div id="paper_save" class="primary_btn">
                Save
            </div>
        </div>
        <div class="tui-image-editor-header-papers">
            <div class="tui-image-editor-header-papers-container">
            </div>
        </div>
    </div>
    <div id="tui-image-editor-container"></div>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/fabric.js/3.4.0/fabric.min.js"></script> -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
    <script type="text/javascript"
        src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
    <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.3/tui-color-picker.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./dist/tui-image-editor.js"></script>
    <script type="text/javascript" src="./theme/whiteTheme.js"></script>
    <script>
        const windowHeight = document.body.clientHeight - 100;
        const windowWidth = document.body.clientWidth - 100;
        // Image editor
        const imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
            includeUI: {
                loadImage: {
                    path: './theme/img1.jpg',
                    name: 'SampleImage'
                },
                theme: whiteTheme,
                initMenu: 'draw',
                menuBarPosition: 'left',
                uiSize: {
                    width: '85%',
                    height: '93%'
                },
            },
            cssMaxWidth: windowWidth,
            cssMaxHeight: windowHeight,
            usageStatistics: false
        });

        window.onresize = function () {
            imageEditor.ui.resizeEditor();
        }
        let selectIndex = 0;
        const paperRef = document.getElementsByClassName("tui-image-editor-header")[0];

        // 保存作业
        const paper_save = document.getElementById("paper_save");
        // 所有作业的ref
        const paperList = document.getElementsByClassName("tui-image-editor-header-papers")[0];

        // 添加所有的监听事件
        function addAllEvents() {
            paper_save.addEventListener('click', function (e) {
                const imageUrl = imageEditor.downLoadImage();
                console.log('click--> 保存作业', imageUrl)
            })
        }
        function getRemoteImage() {
            // get images from serve
            const imageLists = [
                './theme/img1.jpg',
                './theme/img2.jpg',
                './theme/img3.jpg',
                './theme/img4.jpg',
                './theme/img5.jpg']
            loadAllPapers(imageLists);
        }
        // 加载所有的试卷
        function loadAllPapers(imageLists) {
            const imageContainer = document.getElementsByClassName("tui-image-editor-header-papers-container")[0];
            const imageBox = document.getElementsByClassName('tui-image-editor-header-papers-box');
            const allImageRef = imageLists.map((imageUrl, index) => {
                if (index === 0) {
                    return `<div class="tui-image-editor-header-papers-box tui-image-editor-selectedBox" ><img data-index="${index}" src="${imageUrl}"/></div>`;
                }

                return `<div class="tui-image-editor-header-papers-box"><img data-index="${index}" src="${imageUrl}"/></div>`;
            });
            imageContainer.innerHTML = allImageRef.join('');
            snippet.forEach(imageBox, element => {
                element.addEventListener('click', function (e) {
                    changeImage(Number(e.target.dataset.index))
                })
            })
        }
        // 改变图片
        function changeImage(index) {
            image_box = document.getElementsByClassName("tui-image-editor-header-papers-box");
            const srcList = [];
            snippet.forEach(image_box, element => {
                srcList.push(element.childNodes[0].src);
            });
            if (index < 0) {
                selectIndex = 0;
            } else if (index >= srcList.length) {
                selectIndex = srcList.length - 1;
            } else {
                selectIndex = index;
            }

            snippet.forEach(image_box, element => {
                element.classList.remove('tui-image-editor-selectedBox');
            });
            image_box[selectIndex].classList.add('tui-image-editor-selectedBox');
            imageEditor.loadImageFromURL(srcList[selectIndex], 'paperName');
            imageEditor.setAngleToDefault();
            imageEditor.resetCanvas();
        }
        addAllEvents();
        getRemoteImage();
    </script>
</body>

</html>
